<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单实现固定表头</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
        }

        #tableContainer {
            position: relative;
            width: 500px;
            height: 80%;
            overflow-y: auto;
        }

        #tableContainer table {
            width: 100%;
        }

        table {
            background-color: #fff;
        }

        tr {
            height: 100px;
        }

        td,
        th {
            box-sizing: border-box;
            border: 1px solid red;
            text-align: center;
        }
    </style>
</head>
<body>
<table id="table-header"></table>
<div id="tableContainer">
    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>电话</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>12345678901</td>
            <td>18</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>12345678901</td>
            <td>18</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>12345678901</td>
            <td>18</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>12345678901</td>
            <td>18</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>12345678901</td>
            <td>18</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>12345678901</td>
            <td>18</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>12345678901</td>
            <td>18</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>12345678901</td>
            <td>18</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>12345678901</td>
            <td>18</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>12345678901</td>
            <td>18</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>12345678901</td>
            <td>18</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    let thead = document.querySelector("thead") // 旧的表头
    let _thead = thead.cloneNode(true) // 克隆的新表头

    /*遍历表头下的th，分别给新表头和tbody的td宽度赋值*/
    thead.querySelectorAll("th").forEach((cur, index) => {
        _thead.querySelectorAll("th").forEach((_cur, _index) => {
            if (index === _index) {
                _cur.style.width = cur.offsetWidth + "px"
            }
        })
        document.querySelectorAll('#tableContainer tbody td').forEach((_cur, _index) => {
            if (index === _index) {
                _cur.style.width = cur.offsetWidth + "px"
            }
        })
    })
    document.querySelector("#table-header").appendChild(_thead)
    thead.remove()
</script>
</body>
</html>